<template>
  <div class="table-box">
    <ProTable ref="pTable" :columns="columns" :init-param="initParam" :request-api="getJobVoListApi">
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="handleOpenDialog(OptEnum.CREATE)"> 发布新岗位 </el-button>
      </template>
      <template #title="scope">
        <div class="info-item-box">
          <div class="item-top-bar">
            <div class="title-bar">
              <h3>{{ scope.row.title }}</h3>
            </div>
            <div class="operation-bar">
              <el-tooltip placement="top">
                <template #content> 刷新计划 </template>
                <el-icon v-if="scope.row.flagRefresh == 'Y'"><Timer /></el-icon>
              </el-tooltip>
              <el-icon @click="handleOpenDialog(OptEnum.EDIT, scope.row)"><Edit /></el-icon>
              <el-icon @click="handleDeleteMessageItem(scope.row)"><Delete /></el-icon>
            </div>
          </div>
          <div class="tip-bar">
            <span>编号&nbsp;{{ scope.row.id }}&nbsp;|&nbsp;</span>
            <span>{{ scope.row.createDate || scope.row.updateDate }}更新&nbsp;&nbsp;</span>
          </div>
          <div class="tip-bar">
            <span> {{ scope.row.typeName }}&nbsp;|&nbsp;</span>
            <span>{{ scope.row.priceStart }}-{{ scope.row.priceEnd }}元&nbsp;|&nbsp;</span>
          </div>
          <div class="tag-bar">
            <el-tag v-for="(tag, idx) in getTags(scope.row.tags)" :key="idx">
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </template>
      <template #status="scope">
        <el-tag :type="scope.row.status === sysEnum.SIX ? 'danger' : ''" style="margin-left: 5px">
          {{ filterEnum(scope.row.status, jobStatusType) }}
        </el-tag>
      </template>
      <template #jobType="scope">
        <el-tag :type="scope.row.jobType === sysEnum.TWO ? 'danger' : ''" style="margin-left: 5px">
          {{ filterEnum(scope.row.jobType, jobTypeEnum) }}
        </el-tag>
      </template>
      <template #viewCnt="scope">
        <div class="cnt-box">
          <div class="vcnt-number can-click" @click="handleOpenViewWorkers(scope.row)">
            <h1>{{ scope.row.viewCnt }}</h1>
          </div>
        </div>
      </template>
      <template #applyCnt="scope">
        <div class="cnt-box">
          <div class="vcnt-number can-click" @click="handleOpenApplyWorkers(scope.row)">
            <h1>{{ scope.row.applyCnt }}</h1>
          </div>
        </div>
      </template>
      <template #operation="scope">
        <div class="info-opt-box">
          <div class="opt-item" @click="handleOpenJobRefresh(scope.row)">开启刷新</div>
          <div class="opt-item" @click="handleTop">置顶职位</div>
          <div class="opt-item" @click="handleGoden">黄金展位</div>
        </div>
      </template>
    </ProTable>
    <JobDialog ref="dialogRef" @refresh-list="handleRefreshList" />
    <ApplyJobWorkers ref="jwDialogRef" @refresh-list="handleRefreshList" />
    <ViewJobWorkers ref="jvDialogRef" @refresh-list="handleRefreshList" />
    <JobRefreshDialog ref="jrefreshDialogRef" @refresh-list="handleRefreshList" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import ProTable from "@/components/ProTable/index.vue";
//   import MessageItemDialog from "./components/MessageItemDialog.vue";
import { CirclePlus, Delete, Timer, Edit } from "@element-plus/icons-vue";
import { deleteJobApi, getJobVoListApi } from "@/api/modules/cpyjob/ft";
import { ColumnProps } from "@/components/ProTable/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { OptEnum, sysEnum } from "@/biz/eenum/appEnum";
import { filterEnum } from "@/utils";
import { JobVo } from "@/biz/interface/JobType";
import { jobStatusType, jobCntSearchType,jobTypeEnum } from "@/biz/datas/jobData";
import JobDialog from "@/views/cpyjob/ft/components/JobDialog.vue";
import ApplyJobWorkers from "./components/ApplyJobWorkers.vue";
import ViewJobWorkers from "./components/ViewJobWorkers.vue";
import JobRefreshDialog from "./components/JobRefreshDialog.vue";
import { ElMessage } from "element-plus";

const pTable = ref();
// 固定在列表中的参数
const initParam = reactive({});
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  { type: "index", width: 60, label: "#", fixed: "left" },
  {
    prop: "title",
    label: "岗位信息",
    search: { el: "input" }
  },
  {
    prop: "status",
    label: "状态",
    width: 100,
    enum: jobStatusType,
    search: { el: "select" }
  },
  {
    prop: "jobType",
    label: "类型",
    width: 100,
  },
  {
    prop: "applyCnt",
    label: "申请数",
    width: 130,
    enum: jobCntSearchType,
    search: { el: "select" }
  },
  {
    prop: "viewCnt",
    label: "浏览数",
    width: 130,
    enum: jobCntSearchType,
    search: { el: "select" }
  },

  {
    prop: "operation",
    fixed: "right",
    label: "操作"
  }
];

const getTags = computed(() => {
  return (tagsStr: string): string[] => {
    let tags: string[] = [];
    if (tagsStr && tagsStr.length) {
      tags = tagsStr.split(",");
    }
    return tags;
  };
});
//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

// 删除信息
const handleDeleteMessageItem = async (params: JobVo) => {
  await useHandleData(deleteJobApi, { id: params.id! }, `删除【${params.title}】岗位信息`);
  pTable.value.getTableList();
};

const handleTop = () => {
  ElMessage.info("正在建设中...");
};
const handleGoden = () => {
  ElMessage.info("正在建设中...");
};

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  dialogRef.value.acceptParams(params);
};

// 打开刷新页面
const jrefreshDialogRef = ref();
const handleOpenJobRefresh = (rowData?: { id: string }) => {
  let params = {
    optType: OptEnum.EDIT,
    rowData: { ...rowData }
  };
  jrefreshDialogRef.value.acceptParams(params);
};

const jwDialogRef = ref();
const handleOpenApplyWorkers = (rowData?: { id: string }) => {
  if (rowData.applyCnt) {
    let params = {
      rowData: { ...rowData }
    };
    jwDialogRef.value.acceptParams(params);
  } else {
    ElMessage.info("暂无工友申请岗位，请查看如何提升申请数的方法.");
  }
};

const jvDialogRef = ref();
const handleOpenViewWorkers = (rowData?: { id: string }) => {
  if (rowData.viewCnt) {
    let params = {
      rowData: { ...rowData }
    };
    jvDialogRef.value.acceptParams(params);
  } else {
    ElMessage.info("暂无工友浏览岗位，请查看如何提升浏览数的方法.");
  }
};
</script>
<style scoped lang="scss">
.info-item-box {
  display: flex;
  padding: 0.25rem;
  flex-direction: column;
  width: 100%;
  height: 100%;
  & h1,
  h2,
  h3 {
    margin: 0;
  }
  //   background-color: rgb(250, 250, 250);
  //   border: 1px solid rgb(223, 223, 223);
  //   box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
  //   border-radius: 0.25rem;

  .item-top-bar {
    width: 100%;
    display: flex;

    .title-bar {
      flex: 1;
      display: flex;
      padding-left: 0.25rem;
      font-size: 1.2rem;
    }
    .operation-bar {
      color: rgb(116, 116, 116);
      font-size: 1.2rem;
      justify-content: flex-end;
      & i {
        margin: 0.25rem;
        cursor: pointer;
        & :hover {
          color: rgb(51, 51, 51);
        }
      }
    }
  }

  .tip-bar {
    width: 100%;
    display: flex;
    margin-top: 0.5rem;
    padding-left: 0.25rem;
    color: rgb(172, 172, 172);
    font-size: 14px;
  }

  .tag-bar {
    width: 100%;
    display: flex;
    margin-top: 0.5rem;
    padding-left: 0.25rem;
    & .el-tag {
      margin-right: 0.5rem;
    }
  }
}

.cnt-box {
  // border: 1px solid red;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .vcnt-number {
    font-size: 1.8rem;
  }

  .vcnt-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgb(180, 170, 170);
  }

  .can-click {
    cursor: pointer;
    width: 60px;
  }
  .can-click:hover {
    background-color: var(--el-color-primary-light-9);
  }
}

.info-opt-box {
  //   border: 1px solid rgb(223, 223, 223);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .opt-item {
    width: 8rem;
    height: 3rem;
    border-radius: 4px;
    border: 2px solid rgb(250, 136, 30);
    background-color: white;
    margin: 0.5rem;
    line-height: 3rem;
    text-align: center;
    font-weight: bold;
    color: rgb(250, 136, 30);
    &:hover {
      cursor: pointer;
      background-color: rgb(250, 136, 30);
      color: white;
    }
  }
}
</style>
